<template>
    <div class="search-container">
        <span class="search-title">关于课程：{{namechange}}  的搜索结果</span>
        <div v-for="course in courses" :key="course.id" class="course" @click="courseItem(course.id)">
            <!-- 头像 -->
            <div class="cover demo-basic--circle">
                <div class="block"><el-avatar shape="square" :size="80" :src="course.cover"></el-avatar></div>
            </div>
            <!-- 课程信息 -->
            <div class="basic">
                <p class="title">{{course.title}}</p>
                <div>
                    <span class="lessonNum">总课时：{{course.lessonNum}}</span>
                    <span class="buyCount">已有：{{course.buyCount}} 人购买</span>
                    <span class="viewCount">浏览量：{{course.viewCount}}</span>
                </div>
                <div>
                    <span class="originalPrice">原价：{{course.originalPrice}}</span>
                    <span class="nowPrice">现价：{{course.nowPrice}}</span>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import courseApi from '@/api/course'

//   id;
//   teacherId;
//   subjectId;
//   subjectParentId;
//   version;
//   status;
//   isDeleted;
//   gmtCreate;
//   gmtModified;

export default {
    data(){
        return {
            courses: []
        }
    },
    created(){
        this.searchCourse(this.$route.query.coursename)
    },
    computed:{
        namechange(){
            return this.$route.query.coursename
        }
    },
    watch: {
        namechange(coursename){
            this.searchCourse(coursename)
        }
    },
    methods:{
        searchCourse(coursename){
            courseApi.searchCourse(coursename)
                .then(response => {
                    this.courses = response.data.data.courses
                })
        },
        //跳转课程详情界面
        courseItem(courseid){
            this.$router.push('/course/'+courseid)
        }
    }
}
</script>
<style scoped>
.search-container{
    width: 1000px;
    margin: 10px auto;
}
.search-title{
    font-size: 30px;
}
.course{
    width: 100%;
    height:120px;
}
.cover{
    width: 80px;
    height: 80px;
    float: left;
    margin: 20px 10px;
}
.basic{
    width: 880px;
    height: 100px;
    float: left;
    margin: 10px 10px;
}
span{
    margin: 3px 8px;
}
.title{
    font-size:18px;
    font-weight:bold;
    color:#FB7299;
}
.originalPrice{
    font-size:12px;
    color:grey;
    text-decoration: line-through;
}
.nowPrice{
    font-size:14px;
    font-weight:bold;
    color:red;
}
</style>